{include file='common/header'}

<style>
    input[type=checkbox]{ position: relative; top: 2px; }
    input[name=pic]{ display: none; }
    .up-picker{ width: 100px; height: 100px; margin: 0 auto; text-align: center;
        border: 1px solid #e0e0e0; margin-top: 10px; line-height: 100px; cursor: pointer; }
    .up-picker img{ width: 100%; height: 100%; }
</style>

<div class="content">

    <div class="panel">
        <div class="logo"></div>
        <div class="sign">
            <h2>个人信息补全</h2>
            <form id="login_form">
                <div class="up-picker">请选择图片</div>
                <input type="file" name="pic" />
                <input type="text" name="name" placeholder="请输入昵称" />
                <input type="button" class="btn_info" onclick="postData()" value="提交" />
            </form>
        </div>
    </div>

</div>

{include file='common/footer'}

<script language="JavaScript">

    $('.up-picker').click(function(){
        var pic = $('input[name=pic]');
        pic.change(function(){
            var img = this.files[0];
            if(!/image\/.?/.test(img.type)){
                $(this).val('');
                return layer.msg('只允许上传图片');
            }
            var resource = window.URL.createObjectURL(img);
            $('.up-picker').html('<img src="'+resource+'">');
        });
        pic.click();
    });

    /**
     * 上传数据
     */
    function postData(){
        var fd = new FormData(document.getElementById('login_form'));
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '{:url("Ajax/supData")}', true);
        xhr.onload = function(){
            if(xhr.status == 200){
                var res = JSON.parse(xhr.responseText);
                if(res.status == 1){
                    location.assign("{:url('index/index')}");
                }else{
                    layer.msg(res.msg);
                }
            }else{
                layer.msg('上传数据失败');
            }
        };
        xhr.send(fd);
    }

</script>